<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <div class="title-area">
      <div>
        <span>
          {{ parkName }}【{{ buildingName }}】-{{ year }}年【{{
            floorName
          }}】用能统计
        </span>
      </div>
      <el-button size="small" @click="handlerGoback"> 返回 </el-button>
    </div>
    <el-descriptions direction="vertical" :column="9" border>
      <el-descriptions-item
        v-for="(item, index) in tagArr"
        :key="index"
        :type="item.type"
        :label="item.label"
      >
        {{ item.value }}{{ item.unit }}
      </el-descriptions-item>
      >
    </el-descriptions>
    <!-- <el-row>
      <el-col class="tag-area" :span="24">
        <el-tag
          v-for="(item, index) in tagArr"
          :key="index"
          size="medium"
          :type="item.type"
        >
          {{ item.label }}{{ item.value }}{{ item.unit }}
        </el-tag>
      </el-col>
    </el-row> -->
    <lb-table
      class="mt10"
      :column="tableData.column"
      :data="tableData.data"
      border
      :height="600"
      background
    >
      <!-- pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 40, 60, 80]"
      :pager-count="5"
      :current-page.sync="currentPage"
      :total="total"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange" -->
    </lb-table>
  </lb-layout>
</template>

<script>
import { parkBuildingFloorEnergyStatisticListDetail } from "@/api/statistics/park.js";
import { deepClone, dealElectricity } from "@/utils/index";
import { getroomTypeList } from "@/api/park/roomType.js";
export default {
  name: "",
  components: {},
  dicts: ["room_type"],
  data() {
    return {
      tagArr: [
        {
          label: "用能面积",
          value: 0,
          unit: "㎡",
          type: "success",
        },
        {
          label: "单位数量",
          value: 0,
          unit: "家",
          type: "success",
        },
        {
          label: "房间数量",
          value: 0,
          unit: "间",
          type: "success",
        },
        {
          label: "用能人数",
          value: 0,
          unit: "人",
          type: "success",
        },
        {
          label: "人均电耗",
          value: 0,
          unit: "kwh",
          type: "danger",
        },
        {
          label: "人均水耗",
          value: 0,
          unit: "t",
          type: "danger",
        },
        // {
        //   label: "人均碳排",
        //   value: 0,
        //   unit: "kgCO2",
        //   type: "danger",
        // },
        {
          label: "实际费用",
          value: 0,
          unit: "元",
          type: "warning",
        },
      ],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      year: "",
      parkName: "",
      buildingName: "",
      floorName: "",
      roomTypeList: [],
      tableData: {
        column: [
          {
            prop: "deptName",
            label: "单位名称",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "roomType",
            label: "房间类型",
            minWidth: 120,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let that = this;
              let a = "";
              let arr = [...that.roomTypeList];
              let value = scope.row.roomType;
              if (arr.length > 0) {
                arr.map((item) => {
                  if (item.value == value) {
                    a = item.label;
                  }
                });
              }
              return <div>{a}</div>;
            },
          },
          {
            prop: "roomNo",
            label: "房间号",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "roomName",
            label: "房间名称",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "peopleNum",
            label: "用能人数",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "",
            label: "人均电耗(kwh)",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "kwh";
              let personalAvgKwh = scope?.row?.personalAvgKwh ?? 0;
              let value = dealElectricity(personalAvgKwh, 1, 2);
              let a = value + unit;
              return <div>{value}</div>;
            },
          },
          {
            prop: "",
            label: "人均水耗(t)",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "t";
              let personalAvgWater = scope?.row?.personalAvgWater ?? 0;
              let value = dealElectricity(personalAvgWater, 1000, 2);
              let a = value + unit;
              return <div>{value}</div>;
            },
          },
          // {
          //   prop: "",
          //   label: "人均碳排(kgCO2)",
          //   minWidth: 100,
          //   align: "center",
          //   showOverflowTooltip: true,
          //   render: (h, scope) => {
          //     let unit = "kgCO2";
          //     let personalAvgCo2 = scope?.row?.personalAvgCo2 ?? 0;
          //     let value = dealElectricity(personalAvgCo2, 1, 2);
          //     let a = value + unit;
          //     return <div>{value}</div>;
          //   },
          // },
          {
            prop: "",
            label: "总电耗(kwh)",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "kwh";
              let kwhTotal = scope?.row?.kwhTotal ?? 0;
              let value = dealElectricity(kwhTotal, 1, 2);
              let a = value + unit;
              return <div>{value}</div>;
            },
          },
          {
            prop: "",
            label: "总水耗(t)",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "t";
              let waterTotal = scope?.row?.waterTotal ?? 0;
              let value = dealElectricity(waterTotal, 1000, 2);
              let a = value + unit;
              return <div>{value}</div>;
            },
          },
          {
            prop: "",
            label: "总碳排(kgCO2)",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "kgCO2";
              let co2Total = scope?.row?.co2Total ?? 0;
              let value = dealElectricity(co2Total, 1, 2);
              let a = value + unit;
              return <div>{value}</div>;
            },
          },
          {
            prop: "",
            label: "实际费用(元)",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "元";
              let feeTotal = scope?.row?.feeTotal ?? 0;
              let value = dealElectricity(feeTotal, 1, 2);
              let a = value + unit;
              return <div>{value}</div>;
            },
          },
        ],
        data: [],
      },
    };
  },
  created() {
    this.requestroomTypelist();
  },
  mounted() {
    this.handlerSearchDetail();
  },
  methods: {
    // 房间类型
    requestroomTypelist() {
      this.roomTypeList = [];
      getroomTypeList({})
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.rows ?? [];
          if (arr.length > 0) {
            arr.map((item) => {
              let obj = {
                label: item?.name ?? "",
                value: item?.id,
              };
              this.roomTypeList.push(obj);
            });
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!304001");
        });
    },
    async initData(data) {
      let that = this;
      let query = {
        ...data,
      };
      that.$store.commit("app/updateApiCount", "add");
      await parkBuildingFloorEnergyStatisticListDetail(query)
        .then((res) => {
          that.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let result = res?.data ?? {};
          let itemVoList = result?.itemVoList ?? [];
          that.tableData.data = itemVoList;
          this.tagArr[0].value = dealElectricity(result?.floorArea ?? 0, 1, 2);
          this.tagArr[1].value = result?.deptNum ?? 0;
          this.tagArr[2].value = result?.roomNum ?? 0;
          this.tagArr[3].value = result?.peopleNum ?? 0;
          this.tagArr[4].value = dealElectricity(
            result?.personalAvgKwh ?? 0,
            1,
            2
          );
          this.tagArr[5].value = dealElectricity(
            result?.personalAvgWater ?? 0,
            1000,
            2
          );
          // this.tagArr[6].value = dealElectricity(
          //   result?.personalAvgCo2 ?? 0,
          //   1,
          //   2
          // );
          this.tagArr[6].value = dealElectricity(result?.feeTotal ?? 0, 1, 2);
        })
        .catch((err) => {
          that.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    // 搜索
    handlerSearchDetail() {
      // console.log(this.$route.query, "路由参数");
      let query = this.$route.query;
      this.year = query.year;
      this.parkName = query.parkName;
      this.buildingName = query.buildingName;
      this.floorName = query.floorName;
      let parkId = query.parkId;
      let buildId = query.buildId;
      let floorId = query.floorId;
      const data = {
        year: this.year,
        parkId: parkId,
        buildId: buildId,
        floorId: floorId,
      };
      this.initData(data);
    },
    // 重置
    handleReset() {
      this.$refs?.form?.resetFields();
      this.handlerSearchDetail();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
    handlerGoback() {
      let pathRouter = this.$route.meta.activeMenu; // 激活的菜单也是返回的菜单
      let query = {};
      this.$router.push({
        path: pathRouter,
        query: query,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  span {
    font-size: 24px;
    font-weight: 400;
  }
}
.tag-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .el-tag {
    margin-right: 10px;
  }
}
::v-deep .el-descriptions-item__cell {
  text-align: center !important;
}
</style>
